
/* 
功能：菜单1的功能
1. 点击菜单1，创建一个div，内容为“菜单1内容。。。。。。”
2. 再次点击菜单1，删除上一个div，再创建一个div，内容为“菜单1内容。。。。。。” 
*/
(function () {
    /* 1、获取元素 */
    const btn1 = document.querySelector('.btn1');
    const content = document.querySelector('.content');


    /* 2、在btn1这个元素上添加一个点击事件 */
    btn1.addEventListener('click', () => {
        let div = content.querySelector('.content div');
        // 如果div存在，就删除
        if (div) {
            div.remove();
        }

        createBox('btn1-content', content, '菜单1内容。。。。。。');
    });
})();

/* 菜单2的功能 */
(function () {
    /* 1、获取元素 */
    const btn2 = document.querySelector('.btn2');
    const content = document.querySelector('.content');


    /* 2、在btn2这个元素上添加一个点击事件 */
    btn2.addEventListener('click', () => {
        let div = content.querySelector('.content div');
        // 如果div存在，就删除
        if (div) {
            div.remove();
        }

        createBox('btn2-content', content, '菜单2内容。。。。。。');
    });
})();

/* 菜单3的功能 */
(function () {
    /* 1、获取元素 */
    const btn3 = document.querySelector('.btn3');
    const content = document.querySelector('.content');


    /* 2、在btn3这个元素上添加一个点击事件 */
    btn3.addEventListener('click', () => {
        let div = content.querySelector('.content div');
        // 如果div存在，就删除
        if (div) {
            div.remove();
        }

        createBox('btn3-content', content, '菜单3内容。。。。。。');
    });
})();


/* 菜单4的功能 */
(function () {
    /* 1、获取元素 */
    const btn4 = document.querySelector('.btn4');
    const content = document.querySelector('.content');


    /* 2、在btn4这个元素上添加一个点击事件 */
    btn4.addEventListener('click', () => {
        let div = content.querySelector('.content div');
        // 如果div存在，就删除
        if (div) {
            div.remove();
        }

        createBox('btn3-content', content, '菜单4内容。。。。。。');
    });
})();